// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../mixPath'
import mixForm from '../form/mixForm'
import FormInput from '../form/FormInput'

// ============================== 导出混合 ============================== //

export default {
  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixPath],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB.ShowCommon,

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: undefined, // 内部绑定值
      EMPTY: undefined, // 空值常量
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父级的 Web 组件
     */
    parentWeb: mixForm.computed.parentWeb,

    /**
     * 模块路径
     */
    path: mixForm.computed.path,

    /**
     * 所属对象
     */
    obj: mixForm.computed.obj,

    /**
     * 绑定列表
     */
    bindList: mixForm.computed.bindList,

    /**
     * 数据列表
     */
    valueList: mixForm.computed.valueList,

    /**
     * 是否为多个绑定
     */
    isMulti: mixForm.computed.isMulti,

    /**
     * 属性名称
     */
    prop: mixForm.computed.prop,

    /**
     * 尺寸
     */
    size: mixForm.computed.size,

    /**
     * 表项样式类
     */
    itemClass: mixForm.computed.itemClass,

    /**
     * 表项样式对象
     */
    itemStyle: mixForm.computed.itemStyle,

    /**
     * 标签文字个数
     */
    wordNum: mixForm.computed.wordNum,

    /**
     * 父组件的标签文字个数
     */
    parentWordNum: mixForm.computed.parentWordNum,

    /**
     * 最终的标签宽度
     */
    myLabelWidth: mixForm.computed.myLabelWidth,

    /**
     * 是否有前缀
     */
    hasPrefix: FormInput.computed.hasPrefix,

    /**
     * 是否有后缀
     */
    hasSuffix: FormInput.computed.hasSuffix,

    /**
     * 公共属性
     */
    commonProps() {
      const { elProps, size } = this
      return {
        ...elProps,
        disabled: true,
        size,
      }
    },

    /**
     * 内容样式类
     */
    divClass() {
      const { className, hasBorder, parentWeb } = this
      const borderStr = hasBorder || parentWeb.hasBorder ? ' el-input__inner' : ''
      return `CoreWeb-ShowContent ${className}${borderStr}`
    },

    /**
     * 表单项配置
     */
    formItem() {
      const { noLabel, myLabelWidth, size, itemClass, itemStyle, noMargin } = this
      const label = noLabel ? '' : this.label
      const item = 'CoreWeb-ShowItem'
      const alignStr = this.center ? ` ${item}-center` : this.right ? ` ${item}-right` : ''
      const className = `${item}${alignStr} ${itemClass}${noMargin ? ' noMargin' : ''}`
      return {
        key: this.$options.name,
        label,
        labelWidth: myLabelWidth,
        size,
        class: className,
        style: itemStyle,
      }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听数据列表
     */
    valueList() {
      if (this.isDiff()) this.setModel()
    },
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    // 键名不存在，则添加空值，以使属性可响应
    const { obj, bindList, EMPTY, $set } = this
    const keys = Object.keys(obj)
    bindList.forEach((item) => !keys.includes(item) && item !== 'slot' && $set(obj, item, EMPTY))

    if (this.isDiff()) this.setModel()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, model, empty, EMPTY } = this
      if (CORE.isNumber(obj[prop])) return obj[prop] !== model
      return obj[prop] !== (model || empty || EMPTY)
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, empty, EMPTY } = this
      if (CORE.isNumber(obj[prop])) this.model = obj[prop]
      this.model = obj[prop] || empty || EMPTY
    },
  },
}
